<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding:0px;
				margin:0px;
			}
			.box{
				width: 840px;
				height: 105px;
				border: 10px solid red;
				margin:30px auto;
				position: relative;
				overflow: hidden;
			}
			.box ul{
				position:absolute;
				left:0px;
				top:0px;
			}
			.box li{
				float: left;
				list-style: none;
				width: 140px;
				height: 105px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li style="background:purple"><img src="img/0.jpg" alt="" /></li>
				<li style="background:blue"><img src="img/1.jpg" alt="" /></li>
				<li style="background:green"><img src="img/2.jpg" alt="" /></li>
				<li style="background:yellow;"><img src="img/3.jpg" alt="" /></li>
				<li style="background:orange;"><img src="img/4.jpg" alt="" /></li>
				<li style="background: navajowhite;"><img src="img/5.jpg" alt="" /></li>
			</ul>
		</div>
		<script type="text/javascript">
			var oBox=document.getElementsByTagName('div')[0];
			var oUl=oBox.getElementsByTagName('ul')[0];
			oUl.innerHTML+=oUl.innerHTML;//将ul的内容copy一份，赋值给ul.
			oUl.style.width=oUl.children.length*oUl.children[0].offsetWidth+'px';
			
			var tiemr=null;
			timer=setInterval(function(){
				if(oUl.offsetLeft <= -oUl.offsetWidth/2){
					oUl.style.left=0;
				}else{
					oUl.style.left=oUl.offsetLeft-2+'px';
				}
				
			},30)
			oBox.onmouseover=function(){
				clearInterval(timer);
			}
			
			oBox.onmouseout=function(){
				timer=setInterval(function(){
					if(oUl.offsetLeft <= -oUl.offsetWidth/2){
						oUl.style.left=0;
					}else{
						oUl.style.left=oUl.offsetLeft-2+'px';
					}
					
				},30)
			}
		</script>
	</body>
</html>
